import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Button, message, Space, Modal } from 'antd';
import ATable from '@apulis/table'
import type { ATableColumn, SearchToolBarProps } from '@apulis/table';
import type { ActionType } from '@apulis/table/lib/typing';
import { apdeviceRequest } from '@/utils/request';
import { Link } from 'umi';
import trans from '@/utils/translate';
import { listAPI, deleteDevice } from './service';
import Detail from './detail';
import { ExclamationCircleOutlined } from '@ant-design/icons';

export interface device {
  id: number;
  createdAt: number;
  updatedAt: number;
  deletedAt: null
  name: string;
  brand: string;
  model: string
  sn: string;
  firmwareVersion: string;
  ip: string;
  port: number;
  proto: string;
  status: string;
  user: string;
  passwd: string;
  creator: string;
  desc: string;
}

const CentralInference: React.FC = (props) => {
  const tableRef = useRef<ActionType>();
  const [visible, setVisible] = useState(false); // 设备详情弹窗控制
  const [id, setId] = useState(0);

  const columns: ATableColumn[] = [
    {
      title: trans('device.name'),
      dataIndex: 'name',
      render: (text, record) => (
        <a href="#" onClick={() => handleSee(record.id)}>{text}</a>
        // <Link to={`/node-management/terminal-device/detail/${record.serviceId}`}>{text}</Link>
      ),
      fixed: 'left',
    },
    {
      title: trans('device.type'),
      dataIndex: 'brand',
      render: () => '摄像头'
    },
    {
      title: trans('device.protocol'),
      dataIndex: 'proto',
    },
    {
      title: trans('device.ip'),
      dataIndex: 'ip',
    },
    {
      title: trans('device.status'),
      dataIndex: 'status',
      render: (text: string) => trans(`status.${text}`)
    },
    {
      title: trans('info.creator'),
      dataIndex: 'creator',
    },
    {
      title: trans('info.createdAt'),
      dataIndex: 'createdAt',
      format: 'time',
      sortable: true,
    },
    {
      title: trans('info.updatedAt'),
      dataIndex: 'updatedAt',
      format: 'time',
      sortable: true,
    },
    {
      title: trans('operation'),
      dataIndex: '',
      render: (text: string, record: device) => {
        return (
          <Space>
            {/* <a href="#" onClick={() => handleSee(record.id)}>{trans('device.video.see')}</a>
            <Link to='/node-management/terminal-device/inference'>{trans('device.inference')}</Link> */}
            <Link to={`/node-management/terminal-device/add/${record.id}`}>{trans('common.update')}</Link>
            <a href="#" onClick={() => handleDelete(record.id)}>{trans('common.delete')}</a>
          </Space>
        )
      },
      fixed: 'right',
    }
  ]
  const searchList: SearchToolBarProps[] = [
    {
      type: 'select',
      name: 'status',
      label: trans('device.status'),
      placeholder: trans('device.status'),
      selectOptions: [
        { label: trans('status.online'), value: 'online' },
        { label: trans('status.offline'), value: 'offline' },
      ],
      selectProps: { allowClear: true }
    },
    {
      type: 'input',
      name: 'name',
      placeholder: trans('device.name.please'),
      inputProps: { allowClear: true },
    },
    {
      type: 'input',
      name: 'creator',
      placeholder: trans('info.creator.please'),
      inputProps: { allowClear: true },
    }
  ]

  const handleDelete = (id: number) => {
    return (
      // <ModalDelete action={() => {
      //   console.log(1)
      //   deleteDevice(id).then(res => {
      //     if (res && res.code === 0) {
      //       message.success(trans('operation.delete.success'));
      //       tableRef.current?.reload();
      //     }
      //   })
      // }}></ModalDelete>
      Modal.confirm({
        centered: true,
        closable: true,
        icon: <ExclamationCircleOutlined />,
        maskClosable: true,
        okType: 'danger',
        okText: trans('operation.confirm'),
        cancelText: trans('operation.cancel'),
        width: '30%',
        title: <div style={{ fontWeight: 'bold' }}>
          {trans('operation.delete.confirm')}
        </div>,
        content: <div>{trans('operation.delete.reconfirm')}</div>,
        onOk: () => {
          deleteDevice(id).then(res => {
            if (res && res.code === 0) {
              message.success(trans('operation.delete.success'));
              tableRef.current?.reload();
            }
          })
        },
        onCancel: () => {}
      })
    )
  };

  const handleSee = (id: number) => {
    console.log(id);
    setId(id);
    setVisible(true);
  }
  return (
    <PageContainer>
      <Card>
        <ATable
          actionRef={tableRef}
          request={apdeviceRequest}
          dataSourceAPIPath={listAPI}
          searchToolBar={searchList}
          columns={columns}
          rowKey='name'
          leftToolBar={(
            <Link to='/node-management/terminal-device/add'>
              <Button type='primary'>{trans('menu.nodeManagement.terminalDevice.add')}</Button>
            </Link>
          )}
        ></ATable>
      </Card>
      <Detail visible={visible} setVisible={setVisible} id={id}></Detail>
    </PageContainer>
  )
}

export default CentralInference;
